<script setup lang="ts">
import { ref, onMounted } from 'vue'
import accountDateil from './component/accountDateil.vue'
import companyInfo from './component/companyInfo.vue'
import swiperSetting from './component/swiperSetting.vue'
import otherSetting from './component/otherSetting.vue'

const activeName = ref('')
const tabHandle = (tab: any) => {
  localStorage.setItem('activeName', tab)
}
onMounted(() => {
  activeName.value
    ? activeName.value
    : localStorage.setItem('activeName', 'first')
  activeName.value = localStorage.getItem('activeName') as string
})
</script>

<template>
  <el-card ref="elCardRef">
    <div class="card-content">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabHandle">
        <el-tab-pane label="账号详情" name="first">
          <accountDateil />
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <companyInfo />
        </el-tab-pane>
        <el-tab-pane label="首页管理" name="third">
          <swiperSetting />
        </el-tab-pane>
        <el-tab-pane label="其他设置" name="fourth">
          <otherSetting />
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  height: 100vh;
}
</style>
